<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>收款单据</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mainContainer caseListPage">
      <div class="table-serch-bar">
        <el-form ref="form" :inline="true" size="medium" label-width="80px">
          <el-form-item label="客户名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="订单日期">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.Stime" style="width: 100%;" format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
            <el-col class="line" :span="1">-</el-col>
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.Etime" style="width: 100%;" format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="业务类型">
            <el-select v-model="form.resource" placeholder="请选择">
              <el-option label="社保/公积金/商保" value="1"></el-option>
              <el-option label="薪酬/个税" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.status" placeholder="请选择">
              <el-option label="未支付" value="1"></el-option>
              <el-option label="已支付" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        @selection-change="handleSelectionChange"
        class="my-table"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :default-sort="{prop: 'date', order: 'descending'}"
      >
        <el-table-column width="55" align="center" type="selection"></el-table-column>
        <el-table-column min-width="90" align="center" type="index" label="序号"></el-table-column>
        <el-table-column min-width="140" align="center" prop="name" label="用户名称"></el-table-column>
        <el-table-column min-width="240" align="center" prop="comTime" label="收款年月"></el-table-column>
        <el-table-column min-width="300" align="center" prop="orderId" label="收款单编号"></el-table-column>
        <el-table-column min-width="200" align="center" prop="money" label="收款金额"></el-table-column>
        <el-table-column min-width="120" align="center" prop="status" label="状态"></el-table-column>
        <el-table-column min-width="90" align="center" prop="resource" label="业务"></el-table-column>
        <el-table-column min-width="90" align="center" prop="creatPenson" label="创建人"></el-table-column>
        <el-table-column min-width="140" align="center" prop="time" label="创建时间"></el-table-column>

      </el-table>
      <div class="table-tools clearfix">
        <div class="fl">
          <el-button type="default" icon="iconfont iconview" size="medium" @click="viewCase">查看</el-button>
<!--          <el-button type="default" icon="iconfont iconadd" size="medium" @click="addCase">添加</el-button>
          <el-button type="default" icon="iconfont iconedit" size="medium" @click="editCase">编辑</el-button>-->
          <el-button type="default" icon="iconfont iconchange" size="medium" @click="changeCase">到账设置</el-button>
          <el-button type="default" icon="iconfont icondelet1" size="medium" @click="delet">删除</el-button>
        </div>
        <div class="pagination fr">
          <div class="block">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="pageInfo.page"
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="pageInfo.total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
import CompanySelect from "../../components/CompanySelect";

export default {
  name: "collectionview",
  components: {
    CompanySelect
  },
  data() {
    return {
      checked: true,
      selected: [],
      tableData: [],
      form: {
        resource: "",
        name: "",
        status: "",
        Etime: null,
        Stime: null
      },
      currentPage3: 1,
      discount: true,
      discount2: true,
      value: "",
      value2: "",
      addrs: [],
      pageInfo: {
        total: 0,
        pageSize: 10,
        page: 1
      }
    };
  },
  created() {
    this.getlist();
    this.getAllAddrs();
  },
  methods: {
    getlist: function() {
        let param = this.initGetListParam();
      Http.api
        .post(
          "/test/v3",
          param
        )
        .then(res => {
          this.tableData = res.data.data;
          console.log(this.tableData);
          this.pageInfo.total = res.data.pageList.total;
        });
    },
    initGetListParam: function() {
      let param = new Object();
      param.page = this.pageInfo.page;
      param.pageSize = this.pageInfo.pageSize;
      param.name = this.form.name;
      param.resource = this.form.resource;
      param.status = this.form.status;
      param.Stime = this.form.Stime;
      param.Etime = this.form.Etime;
      return param;
    },
    getAllAddrs() {
      Http.api.get("/addr/allPermission",{params:{permissionType:0}}).then(res => {
        this.addrs = res.data;
      });
    },
    handleCurrentChange(val) {
      this.getlist();
    },
    onSubmit() {
      this.pageInfo.page = 1;
      this.getlist();
    },
    // 删除提示
    delet() {
      this.$confirm("确定要删除该单据吗？", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "custom-modal",
        iconClass: "no-icon",
        center: true
      })
        .then(() => {
          let ids = new Array();
          this.selected.forEach(e => {
            ids.push(e.id);
          });
          Http.api
            .post("/test/v4", { ids: ids })
            .then(res => {
              this.$message({
                type: "success",
                message: "已删除"
              });
              this.selected.forEach(e => {
                this.tableData.splice(this.tableData.indexOf(e), 1);
              });
            })
            .catch(error => {
              this.$alert(error.msg, "提示", {
                confirmButtonText: "确定",
                customClass: "custom-modal",
                iconClass: "no-icon",
                showCancelButton: "flase",
                type: "warning",
                center: true
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 查看
    viewCase() {
      if (this.selected.length != 1) {
        this.$message.error("请选择一条数据查看");
        return;
      } else {
        this.$router.push({
          path: "/collect/ViewCollection",
          query: { id: this.selected[0].id }
        });
      }
    },
    //添加
    addCase() {
      this.$router.push({ path: "/case/add" });
    },
    // 编辑
    editCase() {
      if (this.selected.length != 1) {
        this.$message.error("请选择一条数据查看");
        return;
      } else {
        this.$router.push({
          path: "/case/edit",
          query: { id: this.selected[0].id }
        }).catch(()=>{
          this.$message({
            type:"info",
            message:"操作成功"
          })
        });
        }
    },
    //到账时间
    changeCase() {
      if (this.selected.length != 1) {
        this.$message.error("请选择一条数据");
        return;
      } else {
        let ids = new Array();
        this.selected.forEach(e => {
          ids.push(e.id);
        });
        Http.api.post("/test/v6", { ids: ids }).then(res=>{
          this.$router.go(0);
        })
      }
    },
    handleSelectionChange: function(val) {
      this.selected = val;
    },
  }
};
</script>

